<template>
  <div class="container">
    <div class="left">
      <div id="logo">
        <img src="/src/assets/交通logo.png" alt="">
        <h3>智慧交通系统管理平台</h3>
      </div>
      <open-map></open-map>
      <!-- <l7-map></l7-map> -->
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import OpenMap from './components/OpenMap.vue'
// import L7Map from './components/L7Map.vue';
</script>

<style lang="scss" scoped>
#logo {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 100;
  img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    opacity: 0.8;
  }
  h3 {
    font-family: '仿宋';
    color: rgba(18, 151, 228);
    font-style: italic; /* 设置为斜体 */
  }
}
.container {
  display: flex; /* 设置为弹性盒子布局 */
  justify-content: space-between; /* 使子元素左右对称分布 */
  align-items: center; /* 垂直居中对齐 */
  height: 100vh; /* 可选: 设置容器高度为100%视口高度 */
  overflow: hidden;
}

.left {
  flex: 1; /* 可选: 设置左侧div占据另一个div的相等空间 */
}

.right {
  flex: 1; /* 可选: 设置右侧div占据另一个div的相等空间 */
}
</style>
